<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin: 0px auto;
            text-align: center;
        }

        .main {
            width: 400px;
            height: 400px;
            background-color: #CFF;
            display: flex;
            /*控制水平方向的居中和元素之间的间距*/
            justify-content: space-around;
            /*align-items: center;*/
            /*
            flex-wrap: wrap;*/
            /*flex-direction: row-reverse;*/
            /*
            flex-direction: column;*/
            /*flex-flow: wrap row;*/


        }

        .inner {

            width: 160px;
            height: 160px;
            /*
            width: 40px;
            height: 40px;*/
            line-height: 100px;
            /*float:left;*/

        }

        #div1 {
            background-color: #FF9;
            /*flex-grow: 2;*/
            flex-shrink: 0;
            order: 4;
            align-self:center;
        }

        #div2 {
            background-color: #ccf;
            /*flex-grow: 0;*/
            flex-shrink: 1;
            order: 0
        }

        #div3 {
            background-color: #CCC;
            /*flex-grow: 1;*/
            flex-shrink: 0;
            order:2
        }

        #div4 {
            background-color: #F9C;
            flex-shrink: 1;
            order:1
        }
    </style>
</head>
<body>
<div class="main">
    <div class="inner" id="div1">
        我是DIV1
    </div>
    <div class="inner" id="div2">
        我是DIV2
    </div>
    <div class="inner" id="div3">
        我是DIV3
    </div>

    <div class="inner" id="div4">
        我是DIV4
    </div>


</div>
</body>
</html>